<!--  -->
<template>
  <el-drawer v-if="drawer" v-model="drawer" title="编辑" direction="rtl" :before-close="handleClose">
    <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto">
      <el-form-item label="商户编号:" prop="id">
        <el-input v-model="ruleForm.id" placeholder="请输入商户编号" />
      </el-form-item>
      <el-form-item label="商户全称:" prop="fullName">
        <el-input v-model="ruleForm.fullName" placeholder="请输入商户全称" />
      </el-form-item>
      <el-form-item label="商户简称:" prop="shortName">
        <el-input v-model="ruleForm.shortName" placeholder="请输入商户简称" />
      </el-form-item>
      <el-form-item label="联系人:" prop="contactPerson">
        <el-input v-model="ruleForm.contactPerson" placeholder="请输入联系人" />
      </el-form-item>
      <el-form-item label="联系人手机（法人）:" required prop="contactPhone">
        <el-input v-model="ruleForm.contactPhone" placeholder="请输入联系人手机（法人）" />
      </el-form-item>
      <el-form-item label="所在省份:" prop="province">
        <el-cascader style="width:100%" :options="cityData"
          :props="{ value: 'label', label: 'label', children: 'children' }" v-model="provinceArr"
          placeholder="请选择所在省份">
          <template #default="{ data }">
            <span>{{ data.label }}</span>
          </template>
        </el-cascader>
      </el-form-item>
      <!-- <el-form-item label="所在城市:" prop="delivery">
        <el-select v-model="ruleForm.city" placeholder="请选择所在城市" />
      </el-form-item>
      <el-form-item label="所在县区:" prop="county">
        <el-select v-model="ruleForm.county" placeholder="请选择所在县区" />
      </el-form-item> -->
    </el-form>
    <template #footer="{ }">
      <el-button @click="close()">取消</el-button>
      <el-button type="primary" @click="submitForm()">确定</el-button>
    </template>
  </el-drawer>
</template>

<script setup>
import { reactive, ref, defineExpose, defineProps, defineEmits } from 'vue'
import * as merchantApi from '@/api/merchant/index'
import cityData from "../data/city.js"
const ruleFormRef = ref()
const drawer = ref(false)
const props = defineProps({})
const emit = defineEmits(['success'])
const provinceArr = ref([])
const ruleForm = ref({
  id: '',
  fullName: '',
  shortName: '',
  contactPerson: '',
  contactPhone: '',
  province: '',
  password: ''
  // city: '',
  // county: ''
})
const rules = reactive({
  id: [
    {
      required: true,
      message: '请输入商户编号',
      trigger: 'blur'
    }
  ],
  fullName: [
    {
      required: true,
      message: '请输入商户全称',
      trigger: 'blur'
    }
  ],
  shortName: [
    {
      required: true,
      message: '请输入商户简称',
      trigger: 'blur'
    }
  ],
  contactPerson: [
    {
      required: true,
      message: '请输入联系人',
      trigger: 'blur'
    }
  ],
  contactPhone: [
    {
      required: true,
      message: '请输入联系人手机（法人）',
      trigger: 'blur'
    }
  ],
  province: [
    {
      required: true,
      message: '请选择所在省份',
      trigger: 'change'
    }
  ],
  city: [
    {
      required: true,
      message: '请选择所在城市',
      trigger: 'change'
    }
  ],
  county: [
    {
      required: true,
      message: '请选择所在区县',
      trigger: 'change'
    }
  ]
})

const submitForm = async () => {
  if (!ruleFormRef.value) return

  await ruleFormRef.value.validate((valid, fields) => {
    if (valid) {
      ruleForm.value.password = '123456'
      const cityData = provinceArr.value
      ruleForm.value.province = cityData[0]
      ruleForm.value.city = cityData[1]
      ruleForm.value.town = cityData[2]
      merchantApi.addMerchant(ruleForm.value).then((res) => {
        drawer.value = false
        ruleForm.value = {}
        emit('success')
      })
    } else {
      console.log('error submit!', fields)
    }
  })
}

const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}

const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`
}))
const onOpen = (data) => {
  if (data) {
    ruleForm.value = data
    provinceArr.value = [data.province, data.city, data.town]
  }
  drawer.value = true
}
defineExpose({
  onOpen
})
</script>
<style></style>
